<template>
  <div>
    <h2 @click="open = !open">
      {{ treeData.label }}
      <!--  是否有 children  -->
      <span v-if="isOpenFolder">[{{ open ? "-" : "+" }}]</span>
    </h2>
    <!--  是否有 children  ,  默认不显示  -->
    <ul v-if="isOpenFolder"  v-show="open">
        <item  v-for="data in treeData.children" :treeData='data' :key="data.label"></item>
    </ul>
  </div>
</template>

<script>
export default {
  // name 对递归组件是必须的
  name: "Item",
  props: {
    treeData: {
      type: Object,
      require: true,
    },
  },
  data() {
    return {
      open: false,
    };
  },
  computed: {
    isOpenFolder() {
      return this.treeData.children && this.treeData.children.length;
    },
  },
};
</script>

<style>
</style>